<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>菜单编辑</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css" />
</head>
<body>
<style>
.container {width: 400px;margin:30px auto 0 40px;position: relative;font-family: 微软雅黑;font-size: 12px; }
.container p {line-height: 0px;height: 0px;margin: 10px;color: #bbb}
.action {width: 400px;height: 30px;margin: 10px 0;}
.cropped {position: absolute;right: -230px;top: 0;width: 200px;border: 1px #ddd solid;height: 460px;padding: 4px;box-shadow: 0px 0px 12px #ddd;text-align: center;}
.imageBox {position: relative;height: 400px;width: 400px;border: 1px solid #aaa;background: #fff;overflow: hidden;background-repeat: no-repeat;cursor: move;box-shadow: 4px 4px 12px #B0B0B0; }
.imageBox .thumbBox {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;margin-top: -100px;margin-left: -100px;box-sizing: border-box;border: 1px solid rgb(102, 102, 102);box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);background: none repeat scroll 0% 0% transparent;}
.imageBox .spinner {position: absolute;top: 0;left: 0;bottom: 0;right: 0;text-align: center;line-height: 400px;background: rgba(0,0,0,0.7); }
.Btnsty_peyton{ float: right;width: 66px;display: inline-block;margin-bottom: 10px;height: 57px;line-height: 57px;font-size: 20px;color: #FFFFFF;margin:0px 2px;background-color: #f38e81;border-radius: 3px;text-decoration: none;cursor: pointer;box-shadow: 0px 0px 5px #B0B0B0;border: 0px #fff solid;}
    /*选择文件上传*/
.new-contentarea {width: 165px;overflow:hidden;margin: 0 auto;position:relative;float:left;}
.new-contentarea label {width:100%;height:100%;display:block;}
.new-contentarea input[type=file] {width:188px;height:60px;background:#333;margin: 0 auto;position:absolute;right:50%;margin-right:-94px;top:0;right/*\**/:0px\9;margin-right/*\**/:0px\9;width/*\**/:10px\9;opacity:0;filter:alpha(opacity=0);
z-index:2;}
a.upload-img{width:165px;display: inline-block;margin-bottom: 10px;height:57px;line-height: 57px;font-size: 20px;color: #FFFFFF;background-color: #f38e81;border-radius: 3px;text-decoration:none;cursor:pointer;border: 0px #fff solid;box-shadow: 0px 0px 5px #B0B0B0;}
a.upload-img:hover{background-color: #ec7e70;}
.tc{text-align:center;}
    /*www.jq22.com*/
</style>
<div class="page-content-wrap">
    <form class="layui-form">
        <div class="layui-tab" style="margin: 0 0 70px 0;">
            <div class="container">
                <div class="imageBox">
                    <div class="thumbBox"></div>
                    <div class="spinner" style="display: none">Loading...</div>
                </div>
                <div class="action">
                    <!-- <input type="file" id="file" style=" width: 200px">-->
                    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
                        <label for="upload-file">上传图像</label>
                    </a>
                        <input type="file" class="" name="upload-file" id="upload-file" />
                    </div>
                    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
                    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
                    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
                </div>
                <div class="cropped"></div>
            </div>
        </div>
        <div class="layui-form-item layui-pop-btn">
            <div class="">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">提交</button>
                <button type="button" id="cancel" class="layui-btn layui-btn-primary">取消</button>
                <button type="button" style="display: none;" id="save" class="layui-btn layui-btn-primary"></button>
            </div>
        </div>
    </form>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/cropbox.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(window).load(function() {
        var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: 'images/avatar.png'
            }
        var cropper = $('.imageBox').cropbox(options);
        $('#upload-file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
    layui.use(['form', 'jquery', 'page','dialog','baseutil'], function() {
        var form = layui.form,
            $ = layui.jquery,
            page = layui.page,
            baseutil = layui.baseutil,
            dialog = layui.dialog;
    })
</script>
</body>

</html>